<template>
  <div class="merchandise-management-add views-container">
    <div class="wlm-table no-bg">
      <div class="wlm-table-content">
        <div class="wlm-form-steps flex-row flex-align-c flex-justify-c">
          <div class="goods-step">
            <span @click="nextStep" :class="{'active':formFormatData.formStep === 1}">编辑基础信息</span>
            <span @click="nextStep" :class="{'active':formFormatData.formStep === 2}">编辑商品详情</span>
          </div>
        </div>
      </div>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-header">
        选择商品类型
        <span class="form-help" style="margin-left:10px;">保存后不可再次编辑，请慎重操作</span>
      </div>
      <div class="send-type">
        <el-button :disabled="isFormEdit" @click="chanageShopType(40)" plain :class="[`send-item ${formFormatData.formData.transport_type == 40?'is-active':''}`]">
          <p>社区团购</p>
          <span>(团购自提)</span>
          <p class="triangle">
            <i class="el-icon-check"></i>
          </p>
        </el-button>

      </div>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep == 1">
      <div class="wlm-form-header">基本信息</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="formFormatData.formData.goods_name" :maxlength="100"></el-input>
              <p class="form-help">名称不能超过100个字符</p>
            </el-form-item>
            <el-form-item label="商品图" prop="goodsImages">
              <!-- <upload ref="uploadplatform" :confs_idig="platformConfig" :changeEvt="formFormatFiltersChange"></upload> -->
              <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
              <div class="form-help">建议尺寸：750*750像素，第一张为商品主图，其他为商品轮播图，可以拖拽图片调整顺序，商品海报选取轮播图第一张</div>
            </el-form-item>
            <el-form-item label="关联供应商" prop="s_id">
              <el-select :disabled="!!formFormatData.api['editForm']['params']['id']" filterable v-model="formFormatData.formData.s_id" placeholder="请选择或输入关键词搜索">
                <el-option v-for="item in shopData" :disabled="item.storenum==0" :key="item.value" :label="item.name" :value="item.s_id"></el-option>
              </el-select>
              <p class="form-help">关联商家商品保存后无法修改，请谨慎选择</p>
            </el-form-item>
            <el-form-item label="商品分类" prop="category_id">
              <el-form-item label>
                <el-select v-model="category_name" multiple @remove-tag="removeTag" collapse-tags placeholder="请选择">
                  <el-option style="height:auto;padding: 0;" key="key" label="label" value="value" v-if="categoryData.length>0">
                    <div class="category-tree">
                      <el-tree ref="trees" @check="checkChange" :default-checked-keys="formFormatData.formData.category_id" node-key="category_id" highlight-current :props="{label: 'name',children: 'child',isLeaf: 'leaf'}" :data="categoryData" show-checkbox></el-tree>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item label="指定团长可售">
              <el-radio-group v-model="formFormatData.formData.leader_id">
                <el-radio label="0">所有团长可售</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="正方形主图">
              <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
              <div class="form-help">建议尺寸750*750 只适用首页商品展示</div>
            </el-form-item>
            <el-form-item label="长方形主图">
              <choose-files ref="chooseFiles" :config="choosePlatConfig" :changeEvt="formFormatFiltersChange"></choose-files>
              <div class="form-help">建议尺寸750*1334 只适用首页商品展示和店铺商品展示</div>
            </el-form-item>
            <el-form-item label="搭配商品">
              <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
              <el-button type="primary" @click="goodsToogle">添加商品</el-button>
              <el-table v-if="formFormatData.formData.collocation!=''" :data="formFormatData.formData.collocation" style="width: 50%;margin-top:20px">
                <el-table-column prop="date" label="商品">
                  <template slot-scope="scope">
                    <div class="flex-row">
                      <img class="logo" v-if="scope.row.goods.image && scope.row.goods.image" :src="scope.row.goods.image[0]['file_path']" />
                      <div class="inner-text">
                        <p>{{scope.row.goods.goods_name}}</p>
                        <span>￥:{{scope.row.goods.goods_price}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="库存">
                  <template slot-scope="scope">
                    <p>{{scope.row.goods.stock_num}}</p>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div class="operation-group">
                      <el-button class="wlm-text" type="text" @click="deleteTable(scope)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <div class="wlm-form-section section-more">
              <p class="section-inner">
                <el-button type="text" class="text-primary" @click="formFormatData.showNormal = !formFormatData.showNormal">{{`${!formFormatData.showNormal?'展开':'隐藏'}更多设置`}}</el-button>
              </p>
            </div>
            <template v-if="formFormatData.showNormal">
              <el-form-item label="商品卖点">
                <el-input v-model="formFormatData.formData.selling_point" maxlength="50"></el-input>
                <div class="form-help">商品详情页展示卖点信息，不超过50个字符</div>
              </el-form-item>
              <el-form-item label="主图视频">
                <choose-files ref="chooseFiles" :config="choosePlatformVConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <div class="form-help">目前只是支持手机端播放，时长建议10s-20s</div>
              </el-form-item>
              <el-form-item label="商品服务">
                <el-select multiple v-model="formFormatData.formData.serve" placeholder="请选择">
                  <el-option v-for="item in goodsServeData" :key="item.id" :label="item.title" :value="`${item.id}`"></el-option>
                </el-select>
                <div class="form-help">
                  每个商品允许选择多个标签
                  <router-link target="_blank" to="/merchandise/servingMerchandise">
                    <el-button type="text" class="text-primary">添加商品服务</el-button>
                  </router-link>|
                  <el-button type="text" @click="getGoodsServeList">刷新</el-button>
                </div>
              </el-form-item>
              <el-form-item label="商品参数">
                <el-select v-model="formFormatData.formData.param" placeholder="请选择">
                  <el-option v-for="item in goodsParamData" :key="item.id" :label="item.title" :value="`${item.id}`"></el-option>
                </el-select>
                <div class="form-help">
                  每个商品允许选择单个参数
                  <router-link target="_blank" to="/merchandise/parameterMerchandise">
                    <el-button type="text" class="text-primary">新建参数</el-button>
                  </router-link>|
                  <el-button type="text" @click="getGoodsGoodsParamList">刷新</el-button>
                </div>
              </el-form-item>
              <el-form-item label="社群服务">
                <el-select multiple v-model="formFormatData.formData.community_id" placeholder="请选择">
                  <el-option v-for="item in communityData" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>
                <div class="form-help">
                  每个商品允许选择多个服务
                  <router-link target="_blank" to="/merchandise/community">
                    <el-button type="text" class="text-primary">新建社群</el-button>
                  </router-link>|
                  <el-button type="text" @click="getCommunityList">刷新</el-button>
                </div>
              </el-form-item>

              <el-form-item label="购买提醒">
                <el-input type="textarea" v-model="formFormatData.formData.buy_tip"></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
      </section>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep == 1">
      <div class="wlm-form-header">价格库存</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings1" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label="商品规格">
              <el-radio-group :disabled="$isSaleType" v-model="formFormatData.formData.spec_type" @change="changeSpec">
                <el-radio :label="10">单规格</el-radio>
                <el-radio :label="20">多规格</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品结算价格">
              <el-checkbox :true-label="20" :false-label="10" @change="settlementChange" v-model="formFormatData.formData.is_settlement">单独结算</el-checkbox>
              <p class="form-help">商品默认结算价格以商家默认结算比例进行计算</p>
            </el-form-item>
            <el-form-item label="结算金额" prop="settlement" v-if="formFormatData.formData.is_settlement==20&&formFormatData.formData.spec_type == 10">
              <el-input v-model="formFormatData.formData.settlement"></el-input>
            </el-form-item>
            <el-form-item label v-show="formFormatData.formData.spec_type == 20">
              <MultipleSpecifications ref="multipleSpec" :config="{columnData:columnDataUpdate,cardData:cardData,saleIng:$isNoSaleIng, disabled:$isSaleType, isEdit: isFormEdit, content: '进行多规格编辑并保存后，则需要重新设置更新分销佣金及会员价', filterKeys:['goods_price','line_price']}"></MultipleSpecifications>
            </el-form-item>
            <template v-if="formFormatData.formData.spec_type == 10">
              <el-form-item label="售卖价" :prop="'sku.' + 0 + '.goods_price'" :rules="{required: true, message: '请输入售卖价', trigger: 'blur'}">
                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                  <el-input-number :disabled="$isSaleType" :controls="false" :min="0" v-model="formFormatData.formData['sku'][0]['goods_price']"></el-input-number>
                  <div class="wlm-input-append append-right">元</div>
                </div>
              </el-form-item>
              <el-form-item label="市场价" :prop="'sku.' + 0 + '.line_price'" :rules="{required: true, message: '请输入市场价', trigger: 'blur'}">
                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                  <el-input-number :controls="false" :min="0" v-model="formFormatData.formData['sku'][0]['line_price']"></el-input-number>
                  <div class="wlm-input-append append-right">元</div>
                </div>
              </el-form-item>
              <el-form-item  label="商品库存" :prop="'sku.' + 0 + '.stock_num'" :rules="{required: true, message: '请输入商品库存', trigger: 'blur'}">
                <el-input @input.native="clearNativeReg(formFormatData.formData['sku'][0],'stock_num')" v-model.trim="formFormatData.formData['sku'][0]['stock_num']"></el-input>
              </el-form-item>
            </template>

            <div class="wlm-form-section section-more">
              <p class="section-inner">
                <el-button type="text" class="text-primary" @click="formFormatData.showSku = !formFormatData.showSku">{{`${!formFormatData.showSku?'展开':'隐藏'}更多设置`}}</el-button>
              </p>
            </div>
            <section v-if="formFormatData.showSku">
              <el-form-item label="库存预警" v-if="formFormatData.formData.spec_type == 10">
                <el-input @input.native="clearNativeReg(formFormatData.formData['sku'][0],'stock_early')" v-model.trim="formFormatData.formData['sku'][0]['stock_early']"></el-input>
              </el-form-item>
              <el-form-item label="商品编码" v-if="formFormatData.formData.spec_type == 10">
                <el-input v-model.trim="formFormatData.formData['sku'][0]['goods_no']"></el-input>
              </el-form-item>
              <el-form-item label="商品详情显示销量">
                <el-radio-group v-model="formFormatData.formData.is_sales" class="wlm-form-group">
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="2">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="已售出数">
                <el-input @input.native="clearNativeReg(formFormatData.formData,'virtual_sales')" v-model.trim="formFormatData.formData.virtual_sales">
                  <template slot="append">件</template>
                </el-input>
                <p class="form-help">前端显示已出售数等于真实销售数+此处设置的数量</p>
              </el-form-item>
              <el-form-item label="商品详情显示库存">
                <el-radio-group v-model="formFormatData.formData.is_stock" class="wlm-form-group">
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="2">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item  label="商品重量">
                <el-input @blur="notZero(formFormatData.formData['sku'][0],'goods_weight')" @input.native="clearNativeReg(formFormatData.formData['sku'][0],'goods_weight',-1,formFormatData.formData['sku'][0]['goods_weight'],0.01)" v-model.trim="formFormatData.formData['sku'][0]['goods_weight']">
                  <template slot="append">kg</template>
                </el-input>
              </el-form-item>
            </section>
          </el-form>
        </div>
      </section>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep == 1 ">
      <div class="wlm-form-header">物流信息</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings2" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label="配送方式" prop="isexpress">
              <el-checkbox :true-label="0" :false-label="1" v-model="formFormatData.formData.isexpress" disabled>到店自提</el-checkbox>
            </el-form-item>
            <el-form-item label="送达间隔天数">
              <el-radio-group v-model="formFormatData.formData.service">
                <el-radio label="0">当日到达</el-radio>
                <el-radio label="1">次日到达</el-radio>
                <el-radio label="2">隔日到达</el-radio>
                <el-radio label="4">自定义送达间隔天数 <el-input v-model="formFormatData.formData.service_day"  style="width:100px;"></el-input>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否开启预估送达时间">
              <el-radio-group v-model="formFormatData.formData.service_date_open">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="2">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="预估送达时间点" v-show="formFormatData.formData.service_date_open ==1">
              <el-input v-model="formFormatData.formData.service_date"><template slot="append">时</template></el-input>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep == 1">
      <div class="wlm-form-header">其他信息</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings3" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label="推荐商品">
              <el-radio-group v-model="formFormatData.formData.rec_type">
                <el-radio :label="1">本类商品</el-radio>
                <el-radio :label="2">本店商品</el-radio>
                <el-radio :label="3">自定义推荐</el-radio>
                <el-radio :label="4">无</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上架时间">
              <el-radio-group v-model="formFormatData.formData.goods_status">
                <el-radio :label="10">立即上架</el-radio>
                <el-radio :label="30">自定义上架时间</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="formFormatData.formData.goods_status==30" label>
              <el-date-picker v-model="formFormatData.formData.uppertime" :default-time="['00:00:00', '23:59:59']" type="datetime" align="right" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :default-value="new Date()"></el-date-picker>
            </el-form-item>
            <el-form-item label="下架时间">
              <el-radio-group v-model="formFormatData.formData.is_under" class="flex-col">
                <el-radio style="margin-top:10px;" :label="10">否</el-radio>
                <el-radio style="margin:20px 0 0" :label="20">
                  <el-date-picker v-model="formFormatData.formData.under_time" :default-time="['00:00:00', '23:59:59']" type="datetime" align="right" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期" :default-value="new Date()"></el-date-picker>
                </el-radio>
                <p class="form-help">到达设定时间后，此商品自动放置仓库</p>
              </el-radio-group>
            </el-form-item>
            <div class="wlm-form-section section-more">
              <p class="section-inner">
                <el-button type="text" class="text-primary" @click="formFormatData.showOther = !formFormatData.showOther">{{`${!formFormatData.showOther?'展开':'隐藏'}更多设置`}}</el-button>
              </p>
            </div>
            <template v-if="formFormatData.showOther">
              <el-form-item label="限购">
                <el-checkbox v-model="formFormatData.formData.limit_buy" :true-label="10" :false-label="20">限制每人购买数量</el-checkbox>
                <el-input style="margin-left:10px;" v-if="formFormatData.formData.limit_buy == 10" v-model="formFormatData.formData.limit_num" placeholder="请输入限制数量"></el-input>
                <p class="form-help">(限制用户购买商品数量，不勾选不做购买限制)</p>
              </el-form-item>
              <el-form-item label="商品详情感兴趣人数">
                <el-radio-group v-model="formFormatData.formData.is_like" class="wlm-form-group">
                  <el-radio :label="1">显示</el-radio>
                  <el-radio :label="2">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="虚拟感兴趣人数">
                <el-input v-model.trim="formFormatData.formData.virtual_like"></el-input>
                <p class="form-help">前端显示感兴趣人数等于真实感兴趣人数+此处设置的数量</p>
              </el-form-item>
            </template>
          </el-form>
        </div>
      </section>
    </div>
    <div class="wlm-form" v-show="formFormatData.formStep == 1">
      <div class="wlm-form-header">积分信息</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings4" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label="积分抵扣">
              <el-radio-group v-model="formFormatData.formData.balance.rebate" class="wlm-form-group">
                <el-radio :label="2">关闭</el-radio>
                <el-radio :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="最高抵扣" prop='max_rebate_money'>
              <el-input v-model="formFormatData.formData.balance.max_rebate_money">
                <template slot="append">元</template>
              </el-input>
              <p class="form-help">不填则为默认最高抵扣</p>
            </el-form-item>
            <el-form-item label="购买商品赠送积分" prop="bucket">
              <el-input @input.native="clearNativeReg(formFormatData.formData.balance,'give_integral',-1,-1,0.01)" v-model="formFormatData.formData.balance.give_integral">
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep === 2">
      <div class="wlm-form-header">商品详情</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings5" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label>
              <ueditor :ueditorChange="contentInfoChange" :ueditorList="ueditorList" :bindIndex="0" :defaultMsg="shopInfoMsg" :config="{initialFrameWidth: null,initialFrameHeight: 350}" ref="content"></ueditor>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>

    <div class="wlm-form" v-show="formFormatData.formStep === 2">
      <div class="wlm-form-header">购买须知</div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="smsSettings5" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
            <el-form-item label>
              <ueditor v-if="isDelay" :ueditorChange="shopInfoChange" :ueditorList="ueditorList" :bindIndex="1" :defaultMsg="defaultMsg" :config="{initialFrameWidth: null,initialFrameHeight: 350}" ref="by_know"></ueditor>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" type="primary" @click="nextStep">{{`${formFormatData.formStep === 2 ?'上一步':'下一步'}`}},编辑商品详情</el-button>
      <el-button size="small" type="primary" v-if="formFormatData.formStep === 2" @click="saveForm" :disabled="isFormFormatSave" :loading="isFormFormatSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import upload from '@/components/Upload/index'
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import MultipleSpecifications from '@/components/MultipleSpecifications/index'
import power from '@/mixins/power'
import {
  categoryIndex,
  goodsServeListAll,
  goodsParamListAll,
  goodsAdd,
  goodsGet,
  goodsDelivery,
  goodsEdit,
  communityList,
  kammiSelected
} from '@/api/merchandise'
import {
  getSupplierList
} from '@/api/commityBuy'
import {
  posterLists
} from '@/api/application'
import {} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form'), power],
  name: 'ManagementUserAdd',
  components: {
    ChooseGoods,
    upload,
    ChooseFiles,
    ueditor,
    MultipleSpecifications
  },
  directives: {

  },
  computed: {
    $isSaleType() {
      return (!(this.formFormatData.formData.sale_type === 0 && this.formFormatData.formData.cashback_id === 0) && this.isFormEdit)
    },
    $isNoSaleIng() {
      return this.formFormatData.formData.sale_type === 0
    },
    isStock() {
      return (this.formFormatData.formData['sku'][0]['stock_early'] === '' || this.formFormatData.formData['sku'][0]['stock_num'] === '') || (this.formFormatData.formData['sku'][0]['stock_early'] > this.formFormatData.formData['sku'][0]['stock_num'])
    },
    columnDataUpdate() {
      return this.columnData
    }
  },
  created() {
    this.$nextTick(() => {
      this.categoryGet()
      this.getGoodsServeList()
      this.getGoodsGoodsParamList()
      if (this.patSetting.plugin.diyposter.open) {
        this.getDiyPosterList()
      }
      this.getCommunityList()
      this.shopDataGet()
      goodsDelivery().then((response) => {
        const { data: { data: msgData = [] } } = response
        this.goodsDelivery = msgData
      })
    })
  },
  data() {
    var checkCategory = (rule, value, callback) => {
      // 验证前从树节点获取值
      // this.formFormatData.formData.category_id = this.$refs.trees.getCheckedKeys()
      const category_id = this.formFormatData.formData.category_id
      const { message } = rule
      if (!Array.isArray(category_id) || (Array.isArray(category_id) && category_id.length === 0)) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }

    var checkExpress = (rule, value, callback) => {
      // 验证取值
      const isexpress = this.formFormatData.formData.isexpress
      const iszt = this.formFormatData.formData.iszt
      const { message } = rule
      if (isexpress === 0 && iszt === 0) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    var checkImg = (rule, value, callback) => {
      const { message } = rule
      const image = this.formFormatData.formData.image
      if (Array.isArray(image) && image.length === 0) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      // category_array: [],
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        goods_type: 'all',
        // unique: true,
        disabled: [{
          label: 'goods_id',
          value: Number(this.$route.query.id)
        }],
        initList: []
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      checkedKey: [],
      xiajia: 1,
      cardData: [],
      isDelay: false,
      myProps: {
        value: 'category_id',
        label: 'name',
        children: 'child'
      },
      category_name: [],
      category_obj: [],
      ueditorList: [],
      categoryData: [],
      goodsServeData: [],
      goodsParamData: [],
      diyPosterData: {
        goods: [],
        groups: [],
        spike: []
      },
      communityData: [],
      goodsDelivery: [],
      shopData: [],
      defaultMsg: '',
      shopInfoMsg: '',
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'straight_image',
          model: 'img'
        }
      },
      choosePlatConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'long_image',
          model: 'img'
        }
      },
      choosePlatformConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 10,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      choosePlatformVConfig: {
        type: ['video'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'video',
        bindKey: {
          key: 'video',
          model: 'video'
        }
      },
      columnData: [{
        label: '售卖价',
        key: 'goods_price',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '市场价',
        key: 'line_price',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '商品编码',
        key: 'goods_no',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '商品库存',
        key: 'stock_num',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '库存预警',
        key: 'stock_early',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }],
      formFormatData: {
        key: ['smsSettings', 'smsSettings1', 'smsSettings2', 'smsSettings3', 'smsSettings4', 'smsSettings5'],
        model: {
          isReset: true
        },
        api: {
          editForm: {
            api: goodsGet,
            params: {
              id: ''
            },
            filters: {
              choose: {
                bindInit: ['chooseGoodsConfig']
              },
              img: {
                bindInit: ['choosePlatformConfig', 'choosePlatConfig', 'chooseBgConfig']
              },
              video: {
                bindInit: ['choosePlatformVConfig']
              }
            },
            noFilter: ['category_name']
          },
          submitForm: this.$route.query.id ? goodsEdit : goodsAdd
        },
        formStep: 1,
        showNormal: true,
        showPrice: true,
        showOther: true,
        showSku: true,
        formData: {
          rec_type: 4, // 推荐商品
          collocation: [], // 搭配商品
          goods_name: '', // 商品名称
          balance: // 积分信息
          {
            rebate: 2, // 是否开启积分抵扣 2 为关闭  1为开启
            max_rebate_money: '', // 最高抵扣
            give_integral: '' // 购买商品赠送积分
          },
          s_id: '', // 关联供应商
          leader_id: '0', // 指定团长可售 all为全部团长可售
          buy_tip: '', // 购买提醒
          is_settlement: 10, // 是否单独结算 10为否
          settlement: '', // 结算金额
          sale_type: '',
          cashback_id: 0,
          category_id: [], // 商品分类
          image: [],
          long_image: [],
          straight_image: [],
          video: [],
          transport_type: 40, // 商品类型
          serve: [], // 商品服务
          community_id: [], // 社群服务
          goods_diy_id: '',
          groups_diy_id: '',
          spike_diy_id: '',
          uppertime: '', // 上架时间
          under_time: '', // 下架时间
          is_under: 10, // 是否下架
          limit_buy: 20, // 是否限购  默认20 不限购
          limit_num: '', // 限购数量
          code_limit: '',
          is_code: '',
          effect: 10,
          effecttime: '',
          validity: 10,
          validity_day: '',
          validity_time: '',
          validity_starttime: [],
          param: '', // 商品参数
          selling_point: '', // 商品卖点
          spec_type: 10, // 商品规格
          sku: [{
            goods_price: '',
            line_price: '',
            stock_num: '',
            stock_early: '',
            goods_no: '',
            goods_weight: '',
            kammi_id: '',
            settlement: ''
          }],
          deduct_stock_type: '',
          content: '',
          by_know: '',
          delivery_id: '',
          isexpress: 0, // 配送方式 到店自提
          service: '1', // 送达间隔天数
          service_date: '', // 预估送达时间点
          day: 0,

          iszt: 1,
          goods_status: 10, // 商品上架时间 10为立即上架
          sales_initial: '',
          goods_sort: '',
          after_sales: 10,
          is_sales: 1, // 商品详情是否显示销量 1为显示
          is_stock: 1, // 是否显示库存 1为显示
          virtual_sales: '', // 已售数量
          is_like: 1, // 是否显示感兴趣数量 1 显示 2 隐藏
          virtual_like: '', // 虚拟感兴趣人数
          code_num: '1',
          bus_id: -1,
          after_sales_detail: {
            status: '10',
            alow_house: '',
            alow_day: ''
          },
          protect: 1,
          protect_time: 1
        },
        rules: {
          goods_name: [
            {
              message: '请输入商品名称',
              required: true,
              trigger: 'change'
            }
          ],
          goods_price: [
            {
              message: '请输入售卖价',
              required: true,
              trigger: 'change'
            }
          ],
          s_id: [
            {
              message: '请选择关联供应商',
              required: true,
              trigger: 'change'
            }

          ],
          line_price: [
            {
              message: '请输入市场价',
              required: true,
              trigger: 'change'
            }
          ],
          stock_num: [
            {
              message: '请输入商品库存',
              required: true,
              trigger: 'change'
            }
          ],
          isexpress: [
            {
              message: '配送方式至少选择一种!~',
              required: true,
              validator: checkExpress,
              trigger: 'change'
            }
          ],
          settlement: [
            {
              message: '请输入结算金额',
              required: true,
              trigger: 'change'
            }
          ],
          category_id: [
            {
              message: '请选择商品分类',
              required: true,
              validator: checkCategory,
              trigger: 'blur'
            }
          ],
          goodsImages: [
            {
              message: '请选择商品图片',
              required: true,
              validator: checkImg,
              trigger: 'blur'
            }
          ],
          delivery_id: [
            {
              message: '请选择运费模板',
              required: true,
              trigger: 'change'
            }
          ],
          code_num: [
            {
              message: '核销码个数需大于0',
              required: true,
              trigger: 'change'
            }
          ],
          protect_time: [
            { type: 'number', message: '保护时间需为数字', trigger: 'blur' }
          ]
          // max_rebate_money: [
          //   {
          //     // message: '最高抵扣不能大于售卖价格',
          //     validator: checkMaxRebateMoney

          //   }
          // ]
        }
      },
      newData: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.chooseGoodsConfig, 'thchooseGoodsConfig')
      setTimeout(() => {
        this.isDelay = true
      }, 1000)
    })
  },
  methods: {
    getNewTableData(newData) {
      this.newData = newData
    },
    shopDataGet() {
      getSupplierList({ list_rows: 'all' }).then((response) => {
        const { data: { data: msgData = [] } } = response
        this.shopData = msgData
      })
    },
    getDiyPosterList() {
      posterLists({ local: '2' }).then((response) => {
        const { data: { data: msgData = [] } } = response
        msgData.data.map(item => {
          if (item.class === 1) {
            this.diyPosterData.goods.push(item)
          } else if (item.class === 4) {
            this.diyPosterData.groups.push(item)
          } else if (item.class === 3) {
            this.diyPosterData.spike.push(item)
          }
        })
      })
    },
    getGoodsGoodsParamList() {
      goodsParamListAll().then((response) => {
        const { data: { data: msgData = [] } } = response
        this.goodsParamData = msgData
      })
    },
    getCommunityList() {
      communityList().then((response) => {
        const { data: { data: msgData = [] } } = response
        this.communityData = msgData.data
      })
    },
    getGoodsServeList() {
      goodsServeListAll().then((response) => {
        const { data: { data: msgData = [] } } = response
        this.goodsServeData = msgData
      })
    },
    validityChange(validity) {
      if (validity === 10) {
        this.formFormatData.formData.after_sales_detail.status = '10'
      }
    },
    removeTag(tag) {
      this.formFormatData.formData.category_id.splice(0, 1)
      // setCheckedKeys(this.formFormatData.formData.category_id)
      this.$refs.trees.setCheckedKeys(this.formFormatData.formData.category_id)
      // this.$refs.tree.setCheckedKeys(this.formFormatData.formData.category_id)
    },
    checkChange(check, checkedNodes) {
      this.formFormatData.formData.category_id = checkedNodes.checkedKeys
      const result = []
      checkedNodes.checkedNodes.map(item => {
        result.push(item.name)
      })
      this.category_name = result
      // const index = this.formFormatData.formData.category_id.findIndex(item => {
      //   return item === check.category_id
      // })
      // if (index !== -1) {
      //   this.formFormatData.formData.category_id.splice(index, 1)
      //   this.category_name.splice(index, 1)
      // } else {
      //   this.formFormatData.formData.category_id.push(check.category_id)
      //   this.category_name.push(check.name)
      // }
    },
    filtersChange(val) {
      // this.currentRow = val.currentRow
      const displayData = val.displayData
      const result = []
      displayData.map(item => {
        const newData = { image: [{ file_path: item.image[0]['file_path'] }], goods_name: item.goods_name, goods_id: item.goods_id, stock_num: item.stock, goods_price: item.goods_min_price }
        result.push({ goods: newData, goods_id: item.goods_id })
      })
      this.formFormatData.formData.collocation.push(...result)
    },
    deleteTable(scope) {
      this.formFormatData.formData.collocation.splice(scope.$index, 1)
      // this.currentRow.splice(scope.$index, 1)
    },
    goodsToogle() {
      const result = []
      this.formFormatData.formData.collocation.map(item => {
        result.push(Number(item.goods_id))
      })
      this.$refs.chooseGoods.currentRow = result
      this.$refs.chooseGoods.toggle()
    },
    categoryChange(category_array) {
      if (category_array.length > 1) {
        const [category_id] = category_array.slice(-1)
        this.formFormatData.formData.category_id = [category_id]
      } else {
        this.$message.error('不可选择一级商品分类!~')
        this.formFormatData.formData.category_id = []
        this.category_array = []
      }
    },
    categoryGet() {
      categoryIndex().then((response) => {
        const { data: { data: msgData = [] } } = response
        // if (msgData.length > 0) {
        //   msgData.map(item => {
        //     const isParent = (item.parent_id === 0)
        //     if (isParent) {
        //       item.disabled = true
        //     }
        //   })
        // }
        this.categoryData = msgData
      })
    },
    nextStep() {
      console.log(this.cardData)
      // if ((this.formFormatData.formData.spec_type === 10) && this.isStock) {
      //   this.$message.error('库存预警必须小于库存数')
      // } else {
      //   this.formFormatData.formStep = this.formFormatData.formStep === 2 ? 1 : 2
      // }
      this.formFormatData.formStep = this.formFormatData.formStep === 2 ? 1 : 2
    },
    settlementChange(val) {
      if (val === 10 && this.formFormatData.formData.spec_type === 20) {
        this.columnData.splice(this.columnData.length - 1, 1)
      } else if (val === 20 && this.formFormatData.formData.spec_type === 20) {
        this.columnData.push({
          label: '结算金额',
          key: 'settlement',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        })
      }
    },
    multipleSpecChange() {
      if (this.formFormatData.formData.transport_type === 20) {
        // 实物商品
        this.columnData = [{
          label: '售卖价',
          key: 'goods_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '市场价',
          key: 'line_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品编码',
          key: 'goods_no',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品库存',
          key: 'stock_num',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '库存预警',
          key: 'stock_early',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品重量',
          key: 'goods_weight',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }]
      } else if (this.formFormatData.formData.transport_type === 10) {
        this.columnData = [{
          label: '售卖价',
          key: 'goods_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '市场价',
          key: 'line_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品编码',
          key: 'goods_no',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品库存',
          key: 'stock_num',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '库存预警',
          key: 'stock_early',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }]
      } else if (this.formFormatData.formData.transport_type === 30) {
        this.getKamiList()
        this.columnData = [{
          label: '售卖价',
          key: 'goods_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '市场价',
          key: 'line_price',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '商品编码',
          key: 'goods_no',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '卡密库',
          key: 'kammi_id',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }, {
          label: '库存预警',
          key: 'stock_early',
          background: {
            cellStyle: 'background:#fff;',
            headerStyle: 'background:#f2f2f2;color:#909399;'
          }
        }]
      }
      this.$refs.multipleSpec.columnData = this.columnData
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: { skuData } } } = response
        const { content, by_know, sku, category_name, is_settlement } = data
        this.defaultMsg = by_know
        if (skuData !== '') {
          const skuDataParse = JSON.parse(skuData)
          skuDataParse.sku = sku
          const selectData = {}
          sku.map((item, index) => {
            selectData[index] = item.kammi_id
          })
          this.$refs.multipleSpec.selectData = selectData
          console.log('skuDataParse', skuDataParse)
          this.$refs.multipleSpec.baseForm = skuDataParse
        }
        if (Array.isArray(category_name) && category_name.length > 0) {
          this.category_name = category_name
        }
        this.shopInfoMsg = content
        this.multipleSpecChange()
        this.settlementChange(is_settlement)
      }
    },
    saveForm() {
      let goodsPrice = []
      if (this.formFormatData.formData.spec_type === 20 || this.formFormatData.formData.spec_type === 30) {
        this.formFormatData.formData.sku = this.$refs.multipleSpec.joinSpec()
        if (!(this.formFormatData.formData.sku.length > 0)) {
          this.$message.error('请填写商品规格项~!')
          return
        }
        this.formFormatData.formData.skuData = JSON.stringify(this.$refs.multipleSpec.baseForm)
        JSON.parse(this.formFormatData.formData.skuData).spectable.forEach(item => {
          item.forEach(item1 => {
            goodsPrice.push(item1.goods_price)
          })
        })
        goodsPrice.sort((a, b) => {
          return a - b
        })

        goodsPrice = goodsPrice[0]
      }

      let value
      if (this.formFormatData.formData.spec_type == 10) {
        value = this.formFormatData.formData.sku[0].goods_price
      } else {
        value = goodsPrice
      }

      if (this.formFormatData.formData.balance.max_rebate_money > value) {
        this.$message.error('最高抵扣不能大于售卖价')
        return
      }

      this.formFormatData.formData.content = this.shopInfoMsg
      this.formFormatData.formData.by_know = this.defaultMsg
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/commityGoodsManagement', code: 1 } })
    },
    contentInfoChange(msg) {
      this.shopInfoMsg = msg
    },
    shopInfoChange(msg) {
      this.defaultMsg = msg
    },
    chanageShopType(type) {
      this.resetField()
      // this.resetFormFormat()
      this.formFormatData.formData.transport_type = type
      // this.formFormatData.showNormal = true
      // this.formFormatData.showPrice = true
      // this.formFormatData.showOther = true
      // this.formFormatData.showSku = true
      this.formFormatData.formStep = 1
      this.formFormatData.formData.spec_type = 10
      this.$refs.trees.setCheckedKeys([])
      this.formFormatData.formData.category_id = []
      this.category_name = []
      this.formFormatData.formData.is_settlement = 10
      if (type === 30) {
        this.getKamiList()
      }
    },
    getKamiList() {
      kammiSelected({ kammi_class: 1 }).then((response) => {
        const {
          data: {
            data: msgData = []
          }
        } = response
        this.cardData = msgData
        // this.$refs.multipleSpec.cardData = msgData
      })
    },
    changeSpec(val) {
      // if (val === 10 && !this.isFormEdit) {
      //   this.formFormatData.formData.sku = [{
      //     goods_price: '',
      //     line_price: '',
      //     stock_num: '',
      //     stock_early: '',
      //     goods_no: '',
      //     goods_weight: ''
      //   }]
      //   this.formFormatData.formData.skuData = {}
      // } else
      this.formFormatData.formData.sku = [{
        goods_price: '',
        line_price: '',
        stock_num: '',
        stock_early: '',
        goods_no: '',
        goods_weight: ''
      }]

      this.formFormatData.formData.skuData = {}
      if (val === 20) {
        this.multipleSpecChange()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$is-success: #67c23a;

.merchandise-management-add {
  .inputNumber {
    /deep/ .el-input {
      width: 60px;
    }
  }

  .poster {
    /deep/ .el-input,
    .el-input-number {
      width: 160px;
    }
  }

  /deep/ .wlm-form-steps {
    white-space: nowrap;
    background: #f7f7f7;
    padding-bottom: 20px;

    .goods-step {
      > span {
        position: relative;
        display: inline-block;
        cursor: pointer;
        background: #fff;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        box-sizing: border-box;
        width: 515px;
        margin-left: -30px;
        z-index: 0;
        border-radius: 40px;

        &.active {
          position: relative;
          z-index: 1;
          color: #fff;
          background: #409eff;
        }
      }
    }
  }

  .category-tree {
    width: 270px;
    margin-top: 20px;
  }

  .send-type {
    margin-top: 15px;
    padding: 0 20px;
    margin-bottom: 20px;

    .el-button {
      position: relative;
      overflow: hidden;
      padding: 15px 40px;

      & > span {
        & > p {
          font-weight: 600;
          margin-bottom: 15px;
        }

        & > span {
          display: inline-block;
          margin-bottom: 5px;
          color: #c3c3c3;
        }
      }

      .triangle {
        display: none;
        color: #fff;
      }

      &.is-active {
        & > span {
          // &>span {
          //     color: #387abd;
          // }
        }

        .triangle {
          display: inline-block;
          position: absolute;
          right: 0;
          line-height: 60px;
          text-align: center;
          background: #409eff !important;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);

          > i {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
          }
        }
      }
    }
  }
}
</style>
